<template>
    <ul class="status-list">
        <li v-for="item in stateList" :key="item.DEVICE_STATUS" class="status-item">
            <div class="status-title">
                <span class="title" v-html="formatText(item.name)"></span>
                <span class="status-color" :style="{'background-color':item.color}"></span>
            </div>
            <span class="status-count">{{item.COUNT}}</span>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'StatusList',
    props: {
        stateList: Array
    },
    methods: {
        formatText(val) {
            let z = 0;
            let mat = val.match(/.{2}/g);
            let str = '';
            for (const st of mat) {
                str = z === 0 ? st : str + '<br />' + st;
                z++;
            }
            return str;
        }
    }
};
</script>
<style scoped>
.status-list {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
}
.status-item {
    height: 100%;
    display: flex;
    align-items: center;
}
.status-title {
    /* width: 0.8rem; */
    height: 90%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.title {
    font-size: 0.22rem;
    display: inline-block;
}
.status-color {
    width: 0.2rem;
    height: 0.2rem;
    background-color: yellow;
    border-radius: 50%;
    display: inline-block;
    margin-top: 0.05rem;
}
.status-count{
    margin-left: 0.3rem;
}
</style>
